html,body,ul,ol,li,p{margin:0;padding:0;font-family:"微软雅黑";}
ul,ol{list-style: none}
.pre_banner_3d a{
    text-decoration: none;
    border:none;
}
body{
    overflow-x: hidden;
}
.pre_banner_3d{
    margin:auto;
    width:1200px;
    height:470px;
    position:relative;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.sy2-1{
	background:url(../images/yy.png) no-repeat center bottom;
	padding-bottom:3%}
.contrves{
    width:100%;
    height:auto;
    position:absolute;
    
}
.nav_banners{
    width:100%;
    height:auto;
    border-bottom: 1px solid #f2f2f2;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content:space-between;
}
.nav_banners>li{
    display:inline-block;
    padding:5px 16px;
    margin:12px 0;
    border-radius: 5px;
    font-size:14px;
    cursor: pointer;
}
.blue_nav{
    background:#63B504;
    color:#fff;
}
.banner_tree{
    width:100%;
    height:470px;
    position:absolute;
    bottom:0;
    overflow: hidden;
}
.show_phone_s{
    width:414px;
    height:736px;
    position:absolute;
    top:0;
    left:0;
    bottom: 0;
    right:0;
    margin:auto;
    z-index: 10
}
.color_font{
    width: 22px;
    height: 140px;
    font-size:24px;
    text-align: center;
    line-height: 100px;
    position:absolute;
    top:0;bottom:0;
    margin:auto;
    z-index: 50;
    cursor: pointer;
}
.left_btn{
    left:0;
	background:url(../images/sy1-4.jpg) no-repeat center
}
.right_btn{
    right:0;
	background:url(../images/sy1-5.jpg) no-repeat center
}
.img_phone{
    width:100%;
    height:100%;
}
.show_s_ui{
    width:100%;
    height:100%;
    position:relative;
}
.show_s_ui>li{
    width:262px;
    height:350px;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    z-index: 30;
    cursor: pointer;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    opacity: 0;
    font-size:40px;
	box-shadow:0 0 10px #ccc;
    background: #fff;
}
.show_s_ui>li>div{
    width:92%;
    background:#fff;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
	display:block !important;
	overflow:hidden;
	padding:4%;
}
.show_s_ui>li>div>h1{ font-size:15px; text-align:center; margin:3% 0; white-space: nowrap; width: 100%;  overflow: hidden; text-overflow:ellipsis;}
.show_s_ui>li>div>p{ font-size:12px; color:#666; text-align:center;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp:4; -webkit-box-orient: vertical; overflow:hidden; text-align:center; line-height:24px}
.show_s_ui>li>div>h2>a{ display:block; font-size:15px; background:#bb6a55; border-radius:5px; text-align:center; width:100px; line-height:30px; text-align:center; color:#fff; margin:4% auto 0}
.show_s_ui>li>img{
    width:230px;
	height:240px;
	display:block;
	margin:auto
}
#middel_shows{
    width:360px;
    height:429px;
    left:34.9%;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    opacity:1;
}

#left_shows{
    left:7%;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
    opacity: 0.6;
}
#right_shows{
    left:71%;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
#small_left,#small_right{
    width:360px;
    height:412px;
    opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
#small_left{
    left:-15%;
}
#small_right{
    left:102.5%;
}
@media screen and (max-width:1200px){
    .pre_banner_3d {width:1024px;height:463px;}
    #middel_shows {left: 29.5%;}
    .show_s_ui>li { width: 175px;height: 282px;}
    #small_left, #small_right {width: 131px;height: 194px;}
}
@media screen and (max-width:1024px){
    .pre_banner_3d {width: 875px;height: 465px;}
    .show_phone_s {width: 375px;height: 367px;}
    #middel_shows {left: 34.8%;}
    #middel_shows {width: 267px;height: 357px;}
	.show_s_ui>li>div>p{ line-height:22px}
	.sy2-1{ padding-bottom:0}
}
@media screen and (max-width:879px){
    .pre_banner_3d {width: 746px;height: 415px;}
    #middel_shows {left: 31.8%;}
    #middel_shows {width: 269px;height: 357px;}
    .show_s_ui>li {width: 145px;height: 232px;}
}
@media screen and (max-width:768px){
    .pre_banner_3d {width: 675px;height: 336px;}
    .show_phone_s {width: 320px;height:298px;}
    #middel_shows {left: 33.1%;}
    #middel_shows {width: 227px;height: 317px;}
    .show_s_ui>li {width: 138px;height: 245px;}
    #right_shows {left: 72%;}
    .banner_tree {height: 339px;}
}
@media screen and (max-width:685px){
    #small_left {left: -55%;}
    .pre_banner_3d {width: 520px;}
    #small_right {left: 109.5%;}
    .show_phone_s {width: 300px;height: 496px;}
    #middel_shows {left: 29.7%;}
    #middel_shows {width: 213px;height: 340px;}
    #left_shows {left: 0%;}.show_s_ui>li {width: 106px;height: 190px;}
    #right_shows {left: 79.5%;}
	.sy2-1{ padding-bottom:4%; background-size:140px}
}
@media screen and (max-width:521px){
    .pre_banner_3d {width: 359px;}
    #left_shows {left: -41%;}
    #right_shows {left: 107.5%;}
    #middel_shows {left: 20.4%;}
    #middel_shows {width: 214px;height: 340px;}
    .show_phone_s {width: 349px;height: 368px;}
    #middel_shows {left: 15.5%;}
    #middel_shows {width: 246px;height: 330px;}
	.show_s_ui>li>div>h2>a{ font-size:14px; line-height:28px}
}
@media screen and (max-width:359px){
    .pre_banner_3d {width: 320px;}
    .show_phone_s {width: 320px;height: 368px;}
    #middel_shows {left: 14.5%;}
    #middel_shows {width: 228px;height: 330px;}
}